//app模块
import { Login } from '../../api/login';
import { setToKen,removeToKen,setUserName,getUserName,removeUserName } from '../../utils/app';
import cookie from "cookie_js";

const state = {
    //state是存储单一状态，存储基本的数据
    //JSON.parse
    isCollapse: JSON.parse(sessionStorage.getItem('isCollapse')) || false,
    // count: 10
    to_ken: '',
    username: getUserName() || '',

}

const getters = {
    //gitters是store的计算属性，对store进行加工，类computed getters返回的值会根据她的依赖缓存起来，只有当她的依赖值发生改变才被重新计算
    // count: state => state.count + 10
    isCollapse: state => state.isCollapse,
    username: state => state.username,
}
//mutation提价更改数据，使用store.commit方法更改store的存储状态
const mutations = {
    SET_COLLAPSE(state){
        console.log('app')
        state.isCollapse = !state.isCollapse;
        // console.log(state.isCollapse)
        //HTML5储存 
        //JSON.stringify
        // sessionStorage.setItem('isCollapse',JSON.stringify(state.isCollapse))
        // localStorage.setItem('isCollapse',JSON.stringify(state.isCollapse))
        sessionStorage.setItem('isCollapse',JSON.stringify(state.isCollapse))
    },
    // SET_COUNT(state,value){
    //   state.count = value,
    //   console.log(state.count)
    // },
    SET_TOKEN(state, value){
        state.to_ken = value
    },
    SET_USERNAME(state, value){
        state.username = value
    },
}

//action是个装饰器，提交mutation，而不是直接更改状态
const  actions = {
    login({ commit },requestData){
      return new Promise((resolve, rejest) => {
        Login(requestData).then((response) => {
            console.log(response)
            let data = response.data.data
            //普通的  结构:{commit} => commit('SET_TOKEN', data.token)
            commit('SET_TOKEN', data.token);
            commit('SET_USERNAME', data.username);
            setToKen(data.token);
            setUserName(data.username);
            resolve(response)
        }).catch(error =>{
            rejest(error)
        })
      })
    },
    exit({commit}){
        return new Promise((resolve, rejest) => {
            removeToKen();
            removeUserName;
            commit('SET_TOKEN','');
            commit('SET_USERNAME','');
            // console.log('111')
            resolve();
        })
    }
    // setMenuStatus({commit, state},data){
    //   异步，请求接口返回数据后，接着去做别的事情 比如有接口a 接口b b接口需要a接口的参数
    //   commit('SET_COLLAPSE')
    //   console.log(state.isCollapse)
    //   content.getters()
    //   content.state()
    //   content.rootGetters()
    //   console.log(data)
    // }
}
export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters,
}


/* 
浏览器端储存
cookie.js  
存储 cookie.set('key','value')  cookie.set({'key1':'value1','key2':'value'})
获取 cookie.get('key','value')  cookie.get({'key1','key2'})
清除 cookie.remove('key1') cookie,remove('key','value') cookie.remove(['key1','key2'])

HTML5本储存
sessionStorage(关闭浏览器即清除) 临时性  
存储 window.sessionStorage.setIten=m("key","value") 
获取 window.sessionStorage.getItem("key")
清除 window.sessionStorage.removeItem("key")
清除所有 sessionStorage.clear()

localStorage(手动清除) 长期性
存储 window.localStorage.setIten=m("key","value") 
获取 window.localStorage.getItem("key")
清除 window.localStorage.removeItem("key")
清除所有 localStorage.clear()
*/

/* 
action 异步
action与mutation类似，去变更state的状态 有两点不同
1、action处理异步操作，mutation处理同步操作，而action不受这个限制，即可以处理异步，又可以处理同步
2、action改变状态，最后是通过提交mutation
   this.$store.dispatch(actionName)
3、角色定位基于流程顺序，
  mutation专注于修改state，理论上是修改state的唯一途径
  action 业务代码，异步请求
*/
